<template>
    <el-tabs v-model="activeName" type="border-card" style="height: 90%">
        <el-dialog
                title="修改信息"
                :visible.sync="centerDialogVisible"
                width="40%"
                center>
            <div>
                <span>姓名：</span>
                <el-input v-model="xiuName" :disabled="true"></el-input>
            </div>
            <div>
                <span>联系电话：</span>
                <el-input v-model="xiuPhoneNum" :disabled="true"></el-input>
            </div>
            <div style="position: relative">
                <span>请输入新的电话：</span>
                <el-input @blur="telBlur" v-model="newPhoneNum" placeholder="请输入新的手机号码"></el-input>
                <span class="yanzheng" :style=this.telCss>{{telYan}}</span>
            </div>
            <div>
                <span>请输入新密码：</span>
                <el-input v-model="oneNewPwd" placeholder="请输入新的密码" show-password></el-input>
            </div>
            <div style="position: relative">
                <span>请再次输入新密码：</span>
                <el-input @blur="pwdBlur" v-model="twoNewPwd" placeholder="请再次输入新的密码" show-password></el-input>
                <span class="yanzheng" :style=this.pwdCss>{{pwdYan}}</span>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="tijiao">确 定</el-button>
            <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
        <el-tab-pane label="个人信息" name="first">
            <el-table
                    :cell-style="cellStyle"
                    :header-cell-style="rowClass"
                    :data="tableData"
                    border
                    style="width: 100%;height: 100%">
                <el-table-column
                        prop="number"
                        label="员工编号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="员工姓名">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别">
                </el-table-column>
                <el-table-column
                        prop="jobName"
                        label="职位">
                </el-table-column>
                <el-table-column
                        prop="storeName"
                        label="部门">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        label="身份证">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="联系电话">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="入职时间">
                </el-table-column>
                <el-table-column
                        prop="createBy"
                        label="创建人">
                </el-table-column>
                <el-table-column
                        prop="updateTime"
                        label="更新时间">
                </el-table-column>
                <el-table-column
                        prop="updateBy"
                        label="更新人">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="xiugai">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import axios from '../../http/http'
    import * as api from '../../http/api'
    export default {
        name: "tt_grxx",
        data() {
            return {
                activeName: 'first',
                tableData: [],
                centerDialogVisible:false,
                xiuName: '',
                xiuPhoneNum: '',
                newPhoneNum:'',
                oneNewPwd:'',
                twoNewPwd:'',
                telYan:'',
                pwdYan:'',
                telCss:'',
                pwdCss:''
            }
        },
        methods: {
            cellStyle() {
                return "text-align: center;"
            },
            rowClass() {
                return "text-align: center;"
            },
            xiugai(){
                this.newPhoneNum='';
                this.oneNewPwd='';
                this.twoNewPwd='';
                this.telYan='';
                this.pwdYan='';
                this.centerDialogVisible=true;
                this.xiuName=this.tableData[0].name;
                this.xiuPhoneNum=this.tableData[0].tel;
            },
            tijiao(){
                if (this.telYan===''&&this.pwdYan==='两次输入的密码正确') {
                    axios({
                        url:api.xggrxx,
                        method: 'post',
                        data:{
                            password:this.twoNewPwd,
                            tel:this.newPhoneNum
                        }
                    }).then(res=>{
                        console.log(res);
                        if (res.data.code===200) {
                            this.$message.success('修改成功')
                        }else {
                            this.$message.error('修改失败')
                        }

                    })
                }
                this.centerDialogVisible = false
            },
            telBlur(){
                this.telYan='';
                if (this.xiuPhoneNum===this.newPhoneNum) {
                    this.telYan='请重新输入电话号码';
                    this.telCss='color: red;'
                }else if (this.newPhoneNum==='') {
                    this.telYan='请输入电话号码';
                    this.telCss='color: red; right: -30px'
                }
            },
            pwdBlur(){
                this.pwdYan='';
                if (this.oneNewPwd===this.twoNewPwd) {
                    this.pwdYan='两次输入的密码正确';
                    this.pwdCss='color: #00FF00;'
                }else {
                    this.pwdYan='两次输入的密码错误';
                    this.pwdCss='color: red;'
                }
            }
        },
        created() {
            axios({
                url:api.gerenxinxi,
                method:'get',
            }).then(res=>{
                if (res.data.info.sex===1) {
                    res.data.info.sex='男'
                }else {
                    res.data.info.sex='女'
                }
                this.tableData.push(res.data.info)
            }).catch(err=>{
                console.log(err)
            })
        }
    }
</script>

<style scoped lang="less">
    .el-input{
        width: 50%;
    }
    .el-dialog{
        div{
            text-align: right;
            margin-right: 80px;
            margin-bottom: 10px;
        }
    }
    .yanzheng{
        position: absolute;
        right: -60px;
        bottom: 20px;
    }
</style>